<template>
  <div style="height:100%">
    <div class="expire-v3-container2" v-if="vipExpired.indexOf('-') !== -1 && this.couponObj.id">
      <svg-icon iconClass="close" className="close-btn2" @click="onClose"/>
      <p class="expire-header2">恭喜获得，会员<span class="color-o">折扣券</span>！</p>
      <p class="expire-header2-tips mt10">现在开通低至<span class="color-o">{{activeProduct.daylyStr}}</span></p>
      <p class="expire-header2-tips2">
        <img class="img-left" src="../../assets/expire/tips1.png"/>
        开通VIP会员，享受VIP专属权益
        <img class="img-right" src="../../assets/expire/tips1.png"/>
      </p>
      <div class="expire-section2">
        <div class="section2-left">
          <span class="fz16 color-i">￥</span>
          <span class="fs92 color-i">{{parseFloat((couponObj.amount/100||0).toFixed(2))}}</span>
        </div>
        <div class="section2-right">
          <p class="text-tip color-i">老朋友续费尊享</p>
          <p class="fz16">限时尊享续费礼</p>
        </div>
      </div>
      <div class="expire-footer expire-footer2">
        <span class="renew-btn" @click="toCouponPage">领券续费<img class="img-tips" src="../../assets/expire/tips.png" alt=""/></span>
      </div>
    </div>
    <div class="expire-v3-container" v-else>
      <svg-icon iconClass="close" className="close-btn" @click="onClose"/>
      <p class="expire-title">
        <img src="../../assets/expire/title.png" alt="">
      </p>
      <div class="expire-header">您的{{packages.name}}<span v-html="tagName"></span></div>
      <div class="expire-section">
        <span class="section-tips1 tips-left">限时直降</span>
        <span class="section-tips1 tips-right">{{packages.rightsNum}}大权益</span>
        <!-- <p class="section-tips">小智桌面，一款致力于提升用户办公效率的软件</p> -->
        <div class="section-price">
          <span class="origin-price">原价{{parseFloat((activeProduct.origin_price/100||0).toFixed(2))}}</span>
          <span class="price color-i">{{parseFloat((activeProduct.price/100||0).toFixed(2))}}</span>
          <span class="name-item price-name">/</span>
          <span class="name-item">{{activeProduct.name}} = {{packages.rightsNum}}大权益</span>
        </div>
      </div>
      <div class="expire-footer">
        <span class="renew-btn" @click="toPayPage">立即续费<img class="img-tips" src="../../assets/expire/tips.png" alt=""/></span>
        <span class="footer-tips">权益详情</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getCouponList } from '@/api/coupon'
import { getProducts } from '@/api/rights'
import { getCidByPkg } from '@/utils/costum'
export default {
  name: 'MemberExpiredV2',
  data () {
    return {
      packages: {},
      activeProduct: {},
      couponObj: {},
      vipExpired: '',
      tagName: '',
      noReminders: false
    }
  },
  async created () {
    const query = this.$route.query
    const vipExpired = query.vip_expired || '0'
    this.vipExpired = vipExpired
    if (vipExpired.indexOf('-') !== -1) {
      const str = vipExpired.replace('-', '')
      this.tagName = `已经过期 <label>${str}</label> 天啦！`
      await getCouponList().then(res => {
        const list = res.data.list || []
        this.couponObj = list[0] || {}
      })
    } else {
      this.tagName = `还有 <label>${vipExpired}</label> 天就过期啦！`
    }
    this.pkgId = query.pkgid || '10000'
    this.getPackage()
    this.onLoadFinish()
    this.$xz('xz_substat_action', 2410)
  },
  methods: {
    onLoadFinish () {
      let w = 532; let h = 507
      if (this.vipExpired.indexOf('-') !== -1 && this.couponObj.id) {
        w = 511
        h = 444
      }
      this.$xz('xz_set_window_size', 'XZDesktopExpired', w, h)
      this.$xz('xz_page_load_finished', 'XZDesktopExpired')
    },
    onClose () {
      this.$xz('xz_switch_dialog', 'XZDesktopExpired', false)
    },
    async toPayPage () {
      const obj = {
        '10000': 8001,
        '20000': 8023,
        '40000': 8206
      }
      const cid = getCidByPkg(this.pkgId)
      await this.$xz('xz_substat_action', 2411)
      await this.$xz('xz_set_stat_id', obj[this.pkgId])
      this.$xz('xz_switch_dialog', 'XZDesktopOrderVIP', true, JSON.stringify({ cid, pkgid: this.pkgId }))
      this.onClose()
    },
    toCouponPage () {
      this.$xz('xz_switch_dialog', 'XZMainWindow', true)
      this.$xz('xz_switch_tab', 3)
      this.onClose()
    },
    getPackage () {
      const params = { pkg_id: this.pkgId }
      getProducts(params).then(res => {
        const data = res.data || {}
        const packages = data.package_list[0] || {}
        const obj = (data.list || []).reduce((prev, item) => {
          if (item.unlimited) {
            item.dayly = 888888
            item.daylyStr = '地板价'
          } else {
            const days = Math.round(item.bus_ext.duration / (24 * 60)) || 1
            const dayly = parseFloat((item.price / 100 / days).toFixed(2))
            item.dayly = dayly
            item.daylyStr = `${dayly}/天`
          }
          if (item.dayly < prev.dayly) {
            return item
          } else {
            return prev
          }
        }, { dayly: 999999 })
        this.packages = {
          name: packages.name,
          rightsNum: this.intToChinese(packages.rights.length)
        }
        this.activeProduct = obj
      })
    },
    intToChinese (num) {
      const arr1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
      const arr2 = ['', '十', '百', '千', '万']
      if (!num || isNaN(num)) return '零'
      const numStr = num.toString().split('')
      let result = ''
      for (let i = 0; i < numStr.length; i++) {
        const des_i = numStr.length - 1 - i
        result = arr2[i] + result
        const arr1_index = numStr[des_i]
        result = arr1[arr1_index] + result
      }
      result = result.replace(/零+/g, '零')
      result = result.replace(/零+$/, '')
      result = result.replace(/^一十/g, '十')
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
.expire-v3-container{
  height: 100%;
  padding-top: 70px;
  background: url('../../assets/expire/expire-bg.png') top left no-repeat;
  background-size: 100%;
  color: #fff;
}
.close-btn{
  position: absolute;
  top: 15px;
  right: 44px;
  font-size: 22px;
  cursor: pointer;
}
.expire-title{
  padding-left: 42px;
  img{
    width: 187px;
  }
}
.expire-header{
  padding-left: 42px;
  font-size: 20px;
  /deep/label{
    font-size: 32px;
    color: #F0BD05;
  }
}
.expire-section{
  position: relative;
  height: 256px;
  margin-top: 9px;
  background: url('../../assets/expire/expire-pkg.png') top left no-repeat;
  background-size: 100%;
  text-align: center;
  .section-tips1{
    position: absolute;
    top: 72px;
    font-weight: bold;
  }
  .tips-left{
    left: 57px;
    color: #C4843D;
  }
  .tips-right{
    left: 305px;
    color: #909FFF;
  }
  .section-tips{
    padding-top: 9px;
    font-size: 16px;
  }
}
.section-price{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 208px;
  .origin-price{
    margin-right: 15px;
    text-decoration: line-through;
    font-size: 16px;
  }
  .price{
    font-size: 30px;
    font-weight: bold;
  }
  .price-name{
    margin: 0 3px;
  }
  .name-item{
    font-size: 18px;
    font-weight: bold;
  }
}
.expire-footer{
  position: relative;
  padding-top: 10px;
  text-align: center;
}
.renew-btn{
  position: relative;
  display: inline-block;
  width: 180px;
  height: 40px;
  line-height: 40px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFBF76 0%, #E6622C 100%);
  box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}
.img-tips{
  position: absolute;
  top: -18px;
  right: -53px;
  width: 89px;
  height: 35px;
}
.footer-tips{
  position: absolute;
  top: 21px;
  right: 26px;
  opacity: 0.5;

}
.expire-v3-container2{
  height: 100%;
  padding-top: 55px;
  background: url('../../assets/expire/expire-bg2.png') top left no-repeat;
  background-size: 100%;
  color: #fff;
}
.close-btn2{
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 22px;
  cursor: pointer;
}
.expire-header2{
  padding-left: 20px;
  font-size: 28px;
  font-weight: bold;
}
.expire-header2-tips{
  padding-left: 20px;
  font-size: 20px;
}
.color-o{
  color: #F0BD05;
}
.color-i{
  font-weight: bold;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF8DE 100%);
  background-clip: text;
  color: transparent;
}
.expire-header2-tips2{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 29px;
  font-size: 16px;
  img{
    width: 61px;
    height: 2px;
  }
  .img-left{
    margin-right: 15px;
  }
  .img-right{
    margin-left: 15px;
    transform: rotate(180deg);
  }
}
.expire-section2{
  display: flex;
  align-items: center;
  height: 131px;
  margin-top: 22px;
}
.section2-left{
  flex: 220px 0 0;
  padding-left: 20px;
  text-align: center;
}
.section2-right{
  padding-left: 40px;
  .text-tip{
    margin-bottom: 14px;
    font-size: 24px;
  }
}
.fs92{
  font-size: 92px;
}
.expire-footer2{
  padding-top: 15px;
  .img-tips{
    top: -32px;
    right: -17px;
  }
}
</style>
